// 使用Vue提供的 customRef 定义响应式数据
import { customRef } from 'vue'

// hooks是一个函数，将功能封装成一个函数
export default function (initValue: string, delay: number) {
  // let initValue = '您好'
  let timer: number
  // 参数：track【跟踪】, trigger【触发】
  let msg = customRef((track, trigger) => {
    return {
      // get何时被调用？ ----> msg被读取的时候被调用
      get() {
        track() // 告诉Vue数据msg很重要，你要对msg进行持续关注跟踪，一旦msg变化就去更新
        return initValue
      },
      // set何时被调用？ ----> msg被修改的时候被调用
      set(value) {
        // 每次开启定时器之前将上一个定时器关闭
        clearTimeout(timer)
        // 输入框改变之后，一秒之后，页面进行变化
        timer = setTimeout(() => {
          console.log('set', value)
          initValue = value
          trigger() // 通知Vue一下数据msg变化了
        }, delay)
      },
    }
  })
  // 其中hooks需要进行返回
  return {
    msg,
  }
}
